<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9ed;
        }
    </style>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"/>
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
</head>
<body>
<div id="app">
    <template>
        <el-tabs @tab-click="handleClick" v-model="activeName">
            <el-tab-pane label="SM4算法" name="second">
                <el-row>
                    <el-col :span="8">
                        <el-input
                                :rows="6"
                                placeholder="请输入明文"
                                type="textarea"
                                v-model="sm4plaintext">
                        </el-input>

                    </el-col>
                    <el-col :span="1">
                        <el-divider direction="vertical"></el-divider>
                    </el-col>
                    <el-col :span="3">

                        <el-input
                                clearable
                                placeholder="请输入32 的16进制位密钥"
                                maxlength="32"
                                minlength="32"
                                show-word-limit
                                v-model="key">
                        </el-input>
                        <el-button type="primary" icon="el-icon-d-arrow-left" @click="sm4CbcDecrypt"></el-button>
                        <el-button type="primary" icon="el-icon-d-arrow-right" @click="sm4Encrypt"></el-button>
                    </el-col>
                    <el-col :span="1">
                        <el-divider direction="vertical"></el-divider>
                    </el-col>
                    <el-col :span="8">

                        <el-input
                                :rows="6"
                                placeholder="请输入密文"
                                type="textarea"
                                v-model="sm4ciphertext">
                        </el-input>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="SM3算法" name="first">
                <el-row>
                    <el-col :span="8">
                        <el-input
                                :rows="6"
                                placeholder="请输入明文"
                                type="textarea"
                                v-model="sm3plaintext">
                        </el-input>
                    </el-col>

                    <el-col :span="2">
                        <el-divider direction="vertical"></el-divider>
                        <el-button type="primary" icon="el-icon-d-arrow-right" @click="sm3Dgst"></el-button>
                        <el-divider direction="vertical"></el-divider>
                    </el-col>

                    <el-col :span="8">
                        <el-input
                                :rows="6"
                                placeholder="密文输出为"
                                type="textarea"
                                v-model="sm3ciphertext">
                        </el-input>
                    </el-col>
                </el-row>
            </el-tab-pane>

            <el-tab-pane label="SM2算法" name="third">
                <div>
                    <button type="button" class="layui-btn" id="sign_file" @click="">
                        <i class="layui-icon">&#xe67c;</i>上传需要签名的文件
                    </button>

                    <div style="display: inline-block;margin-top: 10px;margin-bottom:20px;">
                        <button class="layui-btn" id="sign" onclick="download()">下载签名文件<i class="layui-icon"></i>
                        </button>
                    </div>
                </div>

                <div>
                    <button type="button" class="layui-btn" id="upload_origin_file">
                        <i class="layui-icon">&#xe67c;</i>上传源文件
                    </button>

                    <button type="button" class="layui-btn" id="upload_sign_file">
                        <i class="layui-icon">&#xe67c;</i>上传签名文件
                    </button>

                    <div style="display: inline-block;margin-top: 10px;margin-bottom:20px;">
                        <button class="layui-btn" onclick="verify()">验证签名<i class="layui-icon"></i></button>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

    </template>


</div>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link href="../element-ui/lib/theme-chalk/index.css" rel="stylesheet">

<script>
    var file_path = ''
    var origin_file_path = ''
    var sign_file_path = ''

    function download() {
        console.log(file_path)
        if (!file_path || file_path === '') {
            return alert('签名文件未上传')
        }

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost:80/sm/download', true);
        xhr.responseType = 'blob';

        xhr.onload = function () {
            if (xhr.status === 200) {
                var blob = new Blob([xhr.response], {type: 'application/octet-stream'});
                var a = document.createElement('a');
                a.href = window.URL.createObjectURL(blob);
                a.download = Math.floor(Math.random() * 10000) + '_sign_file';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                layer.alert('下载签名文件成功', {'icon': 1});
            } else {
                console.log(xhr.statusText);
            }
        };

        var fData = new FormData();
        fData.append('filePath', file_path);
        console.log(file_path);
        console.log(fData)
        xhr.send(fData);
    }

    function verify() {
        console.log('verify')
        // const v = source.value
        if (!origin_file_path || origin_file_path === '') {
            return alert('原始文件未上传！')
        }
        if (!sign_file_path || sign_file_path === '') {
            return alert('签名文件未上传！')
        }

        let fd = new FormData()
        fd.append('filePath',this.origin_file_path);
        fd.append('signFilePath',this.sign_file_path);
        axios({
            method: "post",
            url: "http://localhost/sm/sm2Verify",
            data: fd
        }).then(function (resp) {
            console.log(resp.data.error)
            _this.sm4plaintext = resp.data.output;

            if(resp.data.error!=''){
                _this.$message({
                    message: resp.data.error,
                    type: 'warning'
                });
            }
        })



    }

    uploadFile('#sign_file', function (res) {
        ajaxRequest('http://localhost:80/sm/sm2Sign', {'path': res.path}, function (sign_res) {
            file_path = sign_res.path
        }, function (sign_err) {
            console.log(sign_err);
        })
    })

    uploadFile('#upload_origin_file', function (res) {
        origin_file_path = res.path
    })

    uploadFile('#upload_sign_file', function (res) {
        sign_file_path = res.path
    })

    function uploadFile(elem, doneCallback, errorCallback) {
        layui.use('upload', function () {
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: elem,
                accept: 'file',
                url: 'http://localhost:80/sm/upload',

                done: function (res) {
                    file_path = res.path
                    doneCallback(res);
                },
                error: function () {
                    errorCallback();
                }
            });
        });

    }
</script>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                sm4plaintext: '',
                sm4ciphertext: '',
                key: '',
                sm3plaintext: '',
                sm3ciphertext: '',
                textarea: "",
                //对话框是否显示
            }
        },
        methods: {

            sm4Encrypt() {
                var _this = this;
                this.sm4ciphertext = ''
                let fd = new FormData()
                fd.append('sm4plaintext',this.sm4plaintext);
                fd.append('key',this.key);

                axios({
                    method: "post",
                    url: "http://localhost:80/sm/sm4Encrypt",
                    data: fd
                }).then(function (resp) {
                    _this.sm4ciphertext = resp.data.output;
                    console.log(resp.data.error)
                    if(resp.data.error!=''){
                        _this.$message({
                            message: resp.data.error,
                            type: 'warning'
                        });
                    }

                })

            },
            sm4CbcDecrypt() {
                var _this = this;
                this.sm4plaintext= ''
                let fd = new FormData()
                fd.append('sm4ciphertext',this.sm4ciphertext);
                fd.append('key',this.key);
                axios({
                    method: "post",
                    url: "http://localhost/sm/sm4CbcDecrypt",
                    data: fd
                }).then(function (resp) {
                    console.log(resp.data.error)
                    _this.sm4plaintext = resp.data.output;

                    if(resp.data.error!=''){
                        _this.$message({
                            message: resp.data.error,
                            type: 'warning'
                        });
                    }
                })

            },
            sm3Dgst() {
                var _this = this;
                fd.append('sm3plaintext',this.sm3plaintext);
                axios({
                    method: "post",
                        url: "http://localhost/sm/sm3Dgst",
                    data: this.fd
                }).then(function (resp) {
                    console.log(resp.data.error)
                    _this.sm3ciphertext = resp.data.output; // {rows:[],totalCount:100}
                    if(resp.data.error!=''){
                        _this.$message({
                            message: resp.data.error,
                            type: 'warning'
                        });
                    }
                })
            },
        },
    })

</script>
</body>
</html>